<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="function-box">
					<view class="function-item flexWrap">
						<view class="th1">活动名称</view>
						<view class="th2">有效期</view>
						<view class="th3">操作</view>
					</view>
					<view class="function-item flexWrap" v-for="(item,index) in dataList" :key="index" @tap="goPage('/moduleB/manage/editNewUse?id='+item.id)">
						<view class="th1">{{item.activity_name}}</view>
						<view class="th2">
							<block v-if="item.valid_timedata==1">
								永久有效
							</block>
							<block v-else>
								{{item.startTime}}~{{item.endTime}}
							</block>
						</view>
						<view  class="th3">设置</view>
					</view>
					<view class="add-btn"  @tap="goPage('/moduleB/manage/editNewUse')">
						新建赠券活动
					</view>
				</view>
				<view class="remaks-box">
					备注：可以设置多个赠券活动。
				</view>
				
				<!--操作指引悬浮按钮 -->
				<guideline :path="'moduleB/manage/newUseActive'"></guideline>
				<!-- <view class="bottom-box flexWrapNo">
					<view class="define-btn">提交保存</view>
				</view> -->
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				dataList:[]
			}
		},
		onLoad() {
			this.registerActivityList();
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			registerActivityList(){
				this.$request.post(this.$api.registerActivityList,{
					store_id: uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						for (let i in data.activity_register_list) {
							if(data.activity_register_list[i].valid_timedata==2){
								data.activity_register_list[i].startTime=data.activity_register_list[i].custom_time.split(' - ')[0].split(' ')[0]
								data.activity_register_list[i].endTime=data.activity_register_list[i].custom_time.split(' - ')[1].split(' ')[0]
							}
						}
						this.dataList=data.activity_register_list
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 36upx;
		.function-box{
			background: #1D1C5C;
			border-radius: 10upx;
			padding: 30upx;
			.function-item{
				font-size: 24upx;
				color: #FFFFFF;
				height: 100upx;
				line-height: 100upx;
				border-bottom: 1rpx solid #36355E;
				border-left: 1rpx solid #36355E;
				border-right: 1rpx solid #36355E;
				&:nth-of-type(1){
					border-top: 1rpx solid #36355E;
					font-weight: bold;
					font-size: 30upx;
					.th3{
						color: #FFFFFF;
					}
				}
				.th1{
					width: 180upx;
					height: 100upx;
					text-align: center;
					border-right: 1rpx solid #36355E;
					overflow-y: scroll;
				}
				.th2{
					height: 100upx;
					border-right: 1rpx solid #36355E;
					text-align: center;
					flex: 1;
					overflow-x: scroll;
				}
				.th3{
					height: 100upx;
					width: 100upx;
					text-align: center;
					color: #26BCFD;
				}
			}
			.add-btn{
				font-size: 24upx;
				text-align: center;
				color: #26BCFD;
				height: 100upx;
				line-height: 100upx;
				border-bottom: 1rpx solid #36355E;
				border-left: 1rpx solid #36355E;
				border-right: 1rpx solid #36355E;
			}
		}
		.remaks-box{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #82819B;
			line-height: 40rpx;
			margin-top: 12upx;
		}
		.bottom-box{
			height: 120rpx;
			background: #1D1C5C;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			.define-btn{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				width: 322rpx;
				height: 80rpx;
				background: #26BCFD;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				text-align: center;
			}
		}
	}
</style>
